<template>
    <div>
<!--    主体部分    -->
        <main>
            <div class="box-card animate__animated animate__backInLeft"  v-for="dict in article">
                <img :src="dict.image" class="image">
                <div class="right">
                    <h3><el-link type="primary" @click="submit(dict)">{{dict.title}}</el-link></h3>
                    <div>
                        {{dict.description}}
                    </div>
                </div>

            </div>

            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :total="total"
                    :current-page=currentPage
                    @current-change=page>
            </el-pagination>
        </main>
<!--    副框    -->
        <container class="animate__animated animate__backInRight">
            <div class="see">
                <h3>大家都在看</h3>
                <el-tag class="tag" type="success" @click="getTag(dic)" v-for="dic in tag">{{dic.aritagcontent}}</el-tag>

            </div>
            <div class="type">
                <h3>热门分类 <i class="el-icon-loading"></i></h3>
                <el-tag class="tag" effect="dark" @click="getType(dic)" v-for="dic in type" type="danger">{{dic.aritypecontent}}</el-tag>
            </div>
        </container>
    </div>
</template>
<!--js代码-->
<script>
    export default {
        name: "indexA",
        data(){
            return{
                total: null,
                pageSize: null,
                currentPage: null,
                article:[
                    {
                        id:'',
                        title:'',
                        image:'',
                        description:''
                    }
                ],
                type:[
                    {
                        id:'',
                        aritypecontent:''
                    }
                ],
                tag:[
                    {
                        id:'',
                        aritagcontent:''
                    }
                ],
            }
        },
        methods:{
            page(currentPage){
                const _this = this
                axios.get("http://localhost:8181/manage/listArticle?currentPage="+currentPage).then(function (resp) {
                    _this.article = resp.data.data.records
                    _this.total = resp.data.data.total
                    _this.currentPage = resp.data.data.current
                    _this.pageSize = resp.data.data.size
                })
            },
            submit(dict){
                console.log(dict.id)
                this.$router.push({
                    path: '/showarticle',
                    query: {
                        id: dict.id
                    }
                })
            },
            getTag(dic){
                console.log(dic.aritagcontent)
                const _this = this
                axios.get("http://localhost:8181/article/listArticlebyTag/"+dic.id).then(function (resp) {
                    _this.article = resp.data.data.records
                    _this.total = resp.data.data.total
                    _this.currentPage = resp.data.data.current
                    _this.pageSize = resp.data.data.size
                })
            },
            getType(dic){
                console.log(dic.aritypecontent)
                const _this = this
                axios.get("http://localhost:8181/article/listArticlebyType/"+dic.id).then(function (resp) {
                    _this.article = resp.data.data.records
                    _this.total = resp.data.data.total
                    _this.currentPage = resp.data.data.current
                    _this.pageSize = resp.data.data.size
                })
            },
        },
        created() {
            const _this = this
            axios.get("http://localhost:8181/manage/listArticle").then(function (resp) {
                _this.article = resp.data.data.records
                _this.total = resp.data.data.total
                _this.currentPage = resp.data.data.current
                _this.pageSize = resp.data.data.size
            })
            axios.get("http://localhost:8181/article/listType").then(function (resp) {
                _this.type = resp.data.data;
            });
            axios.get("http://localhost:8181/article/listTag").then(function (resp) {
                _this.tag = resp.data.data;
            });
        },

    }
</script>

<style scoped>
    main{
        margin-top: 20px;
        margin-left: 100px;
    }
    .box-card {
        width: 700px;
        height: 100px;
        background-color: rgb(247, 243, 248);
        overflow:hidden;
        margin-top: 25px;
        border:1px solid rgba(1, 30, 64, 0.63);
        box-shadow: 0px 15px 10px -15px rgb(74, 131, 131);
        border-radius: 5px;
    }
    .image {
        float: left;
        width: 100px;
        height: 100px;

    }
    .box-card .right{
        margin-left: 30px;
        float:left;
        width:500px;
        text-align:left
    }
    .box-card .right h3{
        height:20px;
        line-height:20px;
        font-family:"Microsoft YaHei" !important;
        font-size:16px !important;
        overflow:hidden;
    }
    .box-card .right div{
        height:35px;
        overflow:hidden
    }
    container{
        position: absolute;
        top:140px;
        right: 150px;
        width: 200px;
        height: 300px;

    }
    .see{
        width: 200px;
        height: 150px;
        background-color: rgba(247, 243, 248,0.1);
        border:1px solid rgba(1, 30, 64, 0.63);
        box-shadow: 5px 10px 10px -10px rgb(74, 131, 131);
    }
    .see h3{
        height:20px;
        line-height:20px;
        text-align: left;
        margin-left: 20px;
        font-family:"Microsoft YaHei" !important;
        font-size:16px !important;
    }
    .see .tag{
        cursor:pointer;
        margin: 1px;
    }
    .type {
        margin-top: 20px;
        width: 200px;
        height: 150px;
        background-color: rgba(247, 243, 248,0.1);
        border:1px solid rgba(1, 30, 64, 0.63);
        box-shadow: 5px 10px 10px -10px rgb(74, 131, 131);
    }
    .type h3{
        height:20px;
        line-height:20px;
        text-align: left;
        margin-left: 20px;
        font-family:"Microsoft YaHei" !important;
        font-size:16px !important;
    }
    .type .tag{
        cursor:pointer;
        margin: 1px;
    }



</style>